<template>
  <div class="chat-video-content">
    <div class="chat-box">
      <chatSend @emitAllPoint="setPointData"></chatSend>
    </div>
    <div class="chat-video-box">
      <videoRtsp
        :showToolbar="0"
        :width="1156"
        :height="720"
        :layout="layout1"
        :vid="arr"
        v-if="allPoint.length > 0"
      >
      </videoRtsp>
      <div class="empty" v-else>
        <img class="novideo" src="@/assets/images/video/novideo.png" />
        <p>请选择左侧点位</p>
      </div>
    </div>
  </div>
</template>

<script setup>
import videoRtsp from "./component/videoRtsp.vue";
import chatSend from "./component/chatSend.vue";

let layout1 = ref("1x1");
let layout2 = ref("1x1");
let arr = ref([]);
let allPoint = ref([]);

// 设置点位
const setPointData = (point) => {
  try {
    allPoint.value = point;
    if (point.length > 9) {
      layout1.value = "3x3";

      arr.value = point.slice(0, 9);

      return;
    }
    switch (point.length) {
      case 1:
        layout1.value = "1x1";
        arr.value = point.slice(0, 1);
        break;
      case 2:
        layout1.value = "1+5";

        arr.value = point.slice(0, 2);

        break;
      case 3:
        layout1.value = "1+5";

        arr.value = point.slice(0, 3);

        break;
      case 4:
        layout1.value = "1+5";

        arr.value = point.slice(0, 4);

        break;
      case 5:
        layout1.value = "1+5";

        arr.value = point.slice(0, 5);

        break;
      case 6:
        layout1.value = "3x3";

        arr.value = point.slice(0, 6);

        break;
      case 7:
        layout1.value = "3x3";

        arr.value = point.slice(0, 7);

        break;
      case 8:
        layout1.value = "3x3";

        arr.value = point.slice(0, 7);

        break;
      case 9:
        layout1.value = "3x3";

        arr.value = point.slice(0, 9);

        break;
    }
  } catch (e) {
    console.error(e);
  }
};
</script>
<style lang="scss" scoped>
.chat-video-content {
  width: 100%;
  height: 100%;
  display: flex;
  align-items: top;
  position: relative;
  .chat-box {
    width: 424px;
    height: 100%;
    overflow: hidden;
  }
  .chat-video-box {
    width: calc(100% - 440px);
    height: 100%;
    background: #fff;
    border-radius: 12px;
    margin-left: 16px;
    padding: 40px;
    position: relative;
  }
  .empty {
    text-align: center;
    position: absolute;
    left: 50%;
    top: 50%;
    transform: translate(-50%, -50%);
    .novideo {
      width: 105px;
      height: 80px;
    }
    P {
      font-family: PingFangSC, PingFang SC;
      font-weight: 600;
      font-size: 16px;
      color: black;
      opacity: 0.5;
    }
  }
}
</style>